<template>
  <div class="book">
    <el-button @click="dialogVisible = true">添加书籍</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-form-item label="标题">
          <el-input v-model="sizeForm.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="postBook">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="bookList" border style="width: 100%">
      <el-table-column fixed prop="id" label="序号" width="150">
      </el-table-column>
      

      <el-table-column prop="title" label="书名" width="900"> </el-table-column>

      <el-table-column  label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="dialogVisible2=true"
            >添加章节</el-button>
          <!-- <el-button @click="postBook" type="text" >编辑</el-button> -->
          <el-button type="text" @click="dialogVisible1 = true"
            >编辑</el-button
          >
          
          <el-button type="text" size="small" @click="deleteBook(scope.row.id)"
            >删除</el-button
          >
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
            :append-to-body="true"
          >
            <!-- 修改的表单 -->
            <el-form>
              <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="putBook(scope.row.id)">确 定</el-button>
            </span>
          </el-dialog>
          <!-- ############################################# -->
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="30%"
            :append-to-body="true"
          >
            <!-- 修改的表单 -->
            <el-form>
              <el-form-item label="标题">
                <el-input v-model="chapter.title"></el-input>
              </el-form-item>
              <el-form-item label="简介">
                <el-input v-model="chapter.md_text"></el-input>
              </el-form-item>
              <el-form-item label="文章内容">
                <el-input v-model="chapter.html_text"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="postChapter(scope.row.id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    return {
      bookList: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2 :false,
      // 添加的
      sizeForm: {
        title: "",
        orderby: "",
        img: "",
      },
      // 修改的
      form:{
        title:"",
      },
      chapter:{
        title:"",
        md_text:"",
        html_text:""
      }
    };
  },
  methods: {
    // 获取所有book
    getBookList() {
      request.get(`http://127.0.0.1:7001/api/book`).then((res) => {
        this.bookList = res.data.data;
      });
    },
    // 添加book
    postBook() {
      request.post(`http://127.0.0.1:7001/api/book`,{
          title:this.sizeForm.title,
          md_text:this.sizeForm.md_text,
          html_text:this.sizeForm.html_text,
      }).then((res) => {
        location.reload();
        console.log(res.data);
      });
    },
    // 添加章节
    postChapter(index) {
      console.log(index);
      request.post(`http://127.0.0.1:7001/api/chapter`,{
          id:index,
          chapter:this.chapter
      }).then((res) => {
        console.log("当前的chapter",this.chapter);
        location.reload()
        console.log(res.data);
       
      });
    },
    putBook(index){
      console.log(index);
      request.put(`http://127.0.0.1:7001/api/book/${index}`,{
        title:this.form.title,
          img:this.form.img,
          orderby:this.form.orderby,
      }).then(res =>{
        console.log(res.data);
        location.reload("/book")
      })
    },

  // 删除book
    deleteBook(index) {
      request.delete(`http://127.0.0.1:7001/api/book/${index}`).then((res) => {
        console.log(res.data);
        location.reload("/book");
      });
    },
  },

  created() {
    this.getBookList();
  },
};
</script>

<style scoped>
.book .pic {
  width: 50px;
  height: 50px;
}
</style>